<template>
  <div class="home" id="topics">
    <el-row id="artList" type="flex" justify="space-around">
      <el-card shadow="always" style="border-radios: 5px; width: 100%">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          tab-position="left"
          style="width: 100%"
          v-loading="loading"
          element-loading-text="加载中..."
        >
          <template v-for="(topic, index) in topics">
            <el-tab-pane
              :label="topic.topicName"
              :name="index"
              :key="index"
              :disabled="topic.children.length <= 0"
            >
              <el-card shadow="always" style="padding-top: 0px">
                <ul class="text item">
                  <li
                    size
                    class="topic-item"
                    v-for="(topc, index) in topic.children"
                    v-bind:key="index"
                  >
                    <i
                      class="el-icon-collection"
                      style="color: black; margin-right: 5px"
                    ></i>
                    <el-link
                      :href="'/topics/' + topc.topicId"
                      :underline="false"

                      >{{ topc.topicName }}</el-link
                    >

                  </li>
                </ul>
              </el-card>
            </el-tab-pane>
          </template>
        </el-tabs>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { qryTopics } from "@/api/topicApis";

export default {
  name: "home",
  data() {
    return {
      topics: [],
      activeName: 0,
      loading: true,
    };
  },
  components: {},
  mounted() {
    this.loadTopics();
  },
  methods: {
    loadTopics() {
      this.loading = true;
      qryTopics().then((res) => {
        this.topics = res.data;
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
/* .topic-item {
  width: 20em;
  padding-bottom: 5px;
}

.item {
  float: left;
} */

.el-card__body {
  padding-top: 0px;
}
#topics ul {
  list-style: none;
}
.el-card {
  border: none !important;
}
</style>